//定义全局变量
var element_key;
var element_gid;
var time=new Date();
var year=time.getFullYear(); //获取年份
var month=time.getMonth()+1; //获取月份
var day=time.getDate();  //获取日期
if(parseInt(day)<10){
    day='0'+day;
}
var start_time = 0;
var end_time = 0;
var start_time_t = 0;
var end_time_t = 0;
if (month==1){
    start_time = (year-1) + "年12月01日";
    end_time = year + "年01月"+ day +"日";
}else{
    start_time = year + "年"+ (month-1) +"月01日";
    end_time = year + "年"+ month +"月"+ day +"日";
}



//layui设置
layui.use(['jquery', 'form', 'table', 'layer', 'laydate',  'element', 'tree', 'util', 'carousel'], async function(){
    $ = layui.$;
    form = layui.form;
    table = layui.table;
    layer = layui.layer;
    laydate = layui.laydate;
    element = layui.element;
    tree = layui.tree;
    util = layui.util;
    carousel = layui.carousel;

    element_key = await localStorage.getItem('element_key');
    element_gid = await localStorage.getItem('element_gid');
    console.log(element_key);
    console.log(element_gid);

    laydate.render({
        elem: '#start_date', //指定元素
        type: 'date',
        value: start_time,
        format: 'yyyy年MM月dd日',
        trigger: 'click',
        showBottom: false,
        // 选中某个年份后即刻关闭弹出框，年份扔可以左右点击选择
        done: function(value, date, endDate){


        },
    });

    laydate.render({
        elem: '#end_date', //指定元素
        type: 'date',
        value: end_time,
        format: 'yyyy年MM月dd日',
        trigger: 'click',
        showBottom: false,
        // 选中某个年份后即刻关闭弹出框，年份扔可以左右点击选择
        done: function(value, date, endDate){


        },
    });

    carousel.render({
        elem: '#element_photo',
        width: '100%',//设置容器宽度
        height:'100%',//设置容器高度
        arrow: 'always', //始终显示箭头
        //,anim: 'updown' //切换动画方式
    });


});

//config的设置是全局的
layui.config({
    //存放拓展模块的根目录
    base: ''
}).extend({
    //设定模块别名
    ckplayer: 'ckplayer/ckplayer'
}).use(['ckplayer'], function () {
    var ckplayer = layui.ckplayer;
    //定义视频资源地址
    var videoUrl = "img/test_img/video_resource.mp4";
    //由于X2的ckplayer需要用url请求方式获取配置json
    //因此定义请求的根目录
    var baseUrl = "";

    //定义一个变量：videoObject，用来做为视频初始化配置
    var videoObject = {
        container: '#video',
        variable: 'player',
        video: videoUrl, //视频地址
        baseUrl: baseUrl //配置json所在目录
    };
    var player = new ckplayer(videoObject);//初始化播放器

});

function video_element_adjust() {
    setTimeout("$('#video').css('position','absolute');", 500);
    //$('#video').css('position','absolute');
    // $('#video').css('position','relative');
}


var HYChart1 = echarts.init(document.getElementById('monitor_chart'));

let Data = {
    times: ["2019-10-28 11:00:00", "2019-10-28 12:00:00", "2019-10-28 13:00:00", "2019-10-28 14:00:00", "2019-10-28 15:00:00", "2019-10-28 16:00:00", "2019-10-28 17:00:00", "2019-10-28 18:00:00", "2019-10-28 19:00:00", "2019-10-28 20:00:00", "2019-10-28 21:00:00", "2019-10-28 22:00:00"],
    timeData: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
    windxData: ["东南", "北", "东南", "东", "东南", "东南", "西", "北", "南", "东南", "东南", "东南"],
    windsData: ["2.8/2", "1.4/1", "2.7/2", "3/2", "2.2/2", "1.4/1", "1.5/1", "1.9/2", "1.4/1", "1.8/2", "2/2", "3.4/3"],
    temData: [9, 11, 13, 12, 11, 9, 9, 7, 6, 4, 3, 3],
    rainData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    humData: [76, 76, 70, 62, 58, 53, 50, 49, 46, 44, 44, 42],
};

let colors = ['#FF6863', '#6EAB40', '#3BB5F5'];

option = {
    color: colors,
    toolbox: {
        feature: {
            saveAsImage: { show: true }
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' },
        formatter: function (params, ticket, callback) {
            let index = params[0].dataIndex;
            let Htm = `库水位：${Data.temData[index]}万m³<br>蓄水量：${Data.humData[index]}万m³`;
            return Htm;
        }
    },
    legend: {
        data: ['库水位','蓄水量']
    },
    grid: {
        top: '13%',
        bottom: '8%',
        left: '8%',
        right: '6%'
    },

    xAxis: [
        {
            type: 'category',
            position: 'bottom',
            offset: 0,
            // axisLabel: {
            //     textStyle: {
            //         color: 'rgba(255,255,255,.2)',
            //         // opacity: 0.1,
            //     }
            // },
            // axisLine:{
            //     lineStyle:{
            //         color:'rgba(255,255,255,.2)',
            //     }
            // },
            data: Data.timeData
        }
    ],
    yAxis: [{
        type: 'value',
        name: '库水位',
        scale: true,
        position: 'left',
        offset: 0,
        axisTick: { lineStyle: { color: colors[0] }, inside: true },
        nameTextStyle: { color: colors[0] },
        axisLabel: { color: colors[0] },
        splitLine: { show: false }
    },
        {
            type: 'value',
            name: '蓄水量',
            scale: true,
            position: 'right',
            axisTick: { lineStyle: { color: colors[2] }, inside: true },
            nameTextStyle: { color: colors[2] },
            axisLabel: { color: colors[2] },
            splitLine: { show: false }
        }
    ],
    series: [{
        name: '库水位',
        type: 'line',
        step: false,
        label: { normal: { show: true, position: 'top' } },
        data: Data.temData
    },
        {
            name: '蓄水量',
            type: 'line',
            step: false,
            yAxisIndex: 1,
            color: colors[2],
            label: { normal: { show: true, position: 'top' } },
            data: Data.humData
        }
    ]
};


function line_chart_adjust() {
    setTimeout(function () {
        HYChart1.setOption(option);
    }, 500);
    //$('#video').css('position','absolute');
    // $('#video').css('position','relative');
}